<template>
    <div class="content">
        <div id="cart-title">
            订单管理
            <el-dropdown>
                <span class="el-dropdown-link">
                                                                                                                                        选择查看<i class="el-icon-caret-bottom el-icon--right"></i>
                                                                                                                                      </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item><a @click="getOrdersByState(-1)">未付款</a></el-dropdown-item>
                    <el-dropdown-item><a @click="getOrdersByState(1)">待发货</a></el-dropdown-item>
                    <el-dropdown-item><a @click="getOrdersByState(2)">待确认收货</a></el-dropdown-item>
                    <el-dropdown-item><a @click="getOrdersByState(3)">退货中</a></el-dropdown-item>
                    <el-dropdown-item><a @click="getOrdersByState(6)">退款中</a></el-dropdown-item>
                    <el-dropdown-item><a @click="getOrdersByState(666)">已完成</a></el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <br>
        <div>
            <el-table :data="orders"
                      stripe
                      style="width: 100%">
                <el-table-column prop="OrderId"
                                 label="订单号"
                                 width="300">
                </el-table-column>
                <el-table-column prop="GoodsName"
                                 label="商品名"
                                 width="130">
                </el-table-column>
                <el-table-column prop="Count"
                                 label="数量"
                                 width="80">
                </el-table-column>
                <el-table-column prop="Total"
                                 label="总价">
                </el-table-column>
                <el-table-column label="详情"
                                 inline-template>
                    <el-tooltip class="item"
                                :content="addDetails(row)"
                                placement="bottom-start"
                                effect="light">
                        <i class="el-icon-information">  </i>
                    </el-tooltip>
                </el-table-column>
                <el-table-column prop="State"
                                 label="状态"
                                 inline-template>
                    <div v-if="row.State === -1">
                        <el-tag type="gray">未付款</el-tag>
                    </div>
                    <div v-else-if="row.State === 0||row.State === 1">
                        <el-tag type="gray">待发货</el-tag>
                    </div>
                    <div v-else-if="row.State === 2">
                        <el-tag type="primary">待确认收货</el-tag>
                    </div>
                    <div v-else-if="row.State === 3">
                        <el-tag type="warning"> 退货中</el-tag>
                    </div>
                    <div v-else-if="row.State === 4">
                        <el-tag type="success"> 退货完成</el-tag>
                    </div>
                    <div v-else-if="row.State === 6">
                        <el-tag type="danger">退款中</el-tag>
                    </div>
                    <div v-else-if="row.State === 7">
                        <el-tag type="success"> 退款完成</el-tag>
                    </div>
                    <div v-else-if="row.State === 9">
                        <el-tag type="success">已完成</el-tag>
                    </div>
                    <div v-else-if="row.State === -2">
                        <el-tag type="success">已取消</el-tag>
                    </div>
                </el-table-column>
                <el-table-column label="操作"
                                 inline-template>
                    <div v-if="row.State===-1">
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                                                                                        操作<i class="el-icon-caret-bottom el-icon--right"></i>
                                                                                                      </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item><a @click="cancelOrder(row)">取消订单</a></el-dropdown-item>
                                <el-dropdown-item>
                                    <router-link to="/PaymentOrder"
                                                 class="link">合并付款</router-link>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div v-else-if="row.State===0 ||row.State === 1">
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                                                                                        操作<i class="el-icon-caret-bottom el-icon--right"></i>
                                                                                                      </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item><a @click="applyForRefund(row)">申请退款</a></el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div v-else-if="row.State === 2">
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                                                                                        操作<i class="el-icon-caret-bottom el-icon--right"></i>
                                                                                                      </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item><a @click="confirmReceipt(row)">确认收货</a></el-dropdown-item>
                                <el-dropdown-item><a @click="applicationReturns(row)">申请退货</a></el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div v-else-if="row.State === 3">
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                                                                                        操作<i class="el-icon-caret-bottom el-icon--right"></i>
                                                                                                      </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item><a @click="cancelReturns(row)">取消退货</a></el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div v-else-if="row.State === 6">
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                                                                                        操作<i class="el-icon-caret-bottom el-icon--right"></i>
                                                                                                      </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item> <a @click="cancelRefund(row)">取消退款</a></el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div v-else-if="row.State === 9 || row.State === -2|| row.State === 4|| row.State === 7">
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                                                                                        操作<i class="el-icon-caret-bottom el-icon--right"></i>
                                                                                                      </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item> <a @click="deleteOrder(row)">删除</a></el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog title="申请理由"
                   v-model="dialogVisible"
                   size="tiny">
            <el-input v-model="reasonForApplication"
                      placeholder="请输入申请理由"></el-input>
            <span slot="footer"
                  class="dialog-footer">
                                                    <el-button @click="dialogVisible = false">取 消</el-button>
                                                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                                                  </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data: function () {
        return {
            orders: [],
            dialogVisible: false,
            reasonForApplication: ""
        }
    },
    mounted: function () {
        var _this = this;
        if ($.cookie('front-token') == null) {
            window.location.href = 'http://localhost:60861/#/Login'
        } else {
            getgGoodsInfo: {
                var token = JSON.parse($.cookie('front-token'));
                $.ajax({
                    type: "Get",
                    url: "/api/Order/GetUserOrders",
                    headers: {
                        Authorization: "Bearer " + token.access_token
                    },
                    contentType: "application/json",
                    data: {
                        state: 10
                    },
                    dataType: "json",
                    success: function (data) {
                        _this.orders = data;
                    },
                    error: function (msg) {
                        alert(msg);
                    }
                });
            }
        }
    },
    methods: {
        addDetails(order) {
            return "收货人：" + order.Consignee + "\n" + "联系电话：" + order.PhoneNumber + "\n" + "收货地址：" + order.DeliveryAddress + "\n" + "创建时间：" + order.CreateTime;
        },
        cancelOrder(order) {
            var _this = this;
            var token = JSON.parse($.cookie('front-token'));
            $.ajax({
                type: "Patch",
                url: "/api/Order/OrderOperation",
                headers: {
                    Authorization: "Bearer " + token.access_token
                },
                data: {
                    Order: order,
                    OperationType: "cancel"
                },
                dataType: "json",
                success: function (data) {
                    if (data != null) {
                        _this.orders = data;
                        _this.Success("取消成功")
                    } else {
                        _this.Failed("取消失败，请核查订单！")
                    }

                },
                error: function (msg) {
                    _this.Failed("系统故障")
                }
            });
        },
        Success(mes) {
            this.$message({
                showClose: true,
                message: mes,
                type: 'success'
            });
        },
        Failed(mes) {
            this.$message({
                showClose: true,
                message: mes,
                type: 'error'
            });
        },
        applyForRefund(order) {
            var reason = this.reasonForApplication
            if (reason == "") {
                this.Failed("请您填写理由后，重新申请！")
                this.dialogVisible = true;
            } else {
                var _this = this;
                var token = JSON.parse($.cookie('front-token'));
                order.ReasonForApplication = this.reasonForApplication;
                $.ajax({
                    type: "Patch",
                    url: "/api/Order/OrderOperation",
                    headers: {
                        Authorization: "Bearer " + token.access_token
                    },
                    data: {
                        Order: order,
                        OperationType: "applyForRefund"
                    },
                    dataType: "json",
                    success: function (data) {
                        if (data != null) {
                            _this.orders = data;
                            _this.reasonForApplication = "";
                            _this.Success("申请成功")
                        } else {
                            _this.Failed("申请失败，请核查订单！")
                        }

                    },
                    error: function (msg) {
                        _this.Failed("系统故障")
                    }
                });
            }
        },
        cancelRefund(order) {
            var _this = this;
            var token = JSON.parse($.cookie('front-token'));
            $.ajax({
                type: "Patch",
                url: "/api/Order/OrderOperation",
                headers: {
                    Authorization: "Bearer " + token.access_token
                },
                data: {
                    Order: order,
                    OperationType: "cancelRefund"
                },
                dataType: "json",
                success: function (data) {
                    if (data != null) {
                        _this.orders = data;
                        _this.Success("取消成功")
                    } else {
                        _this.Failed("取消失败，请核查订单！")
                    }

                },
                error: function (msg) {
                    _this.Failed("系统故障")
                }
            });
        },
        confirmReceipt(order) {
            var _this = this;
            var token = JSON.parse($.cookie('front-token'));;
            $.ajax({
                type: "Patch",
                url: "/api/Order/OrderOperation",
                headers: {
                    Authorization: "Bearer " + token.access_token
                },
                data: {
                    Order: order,
                    OperationType: "confirmReceipt"
                },
                dataType: "json",
                success: function (data) {
                    if (data != null) {
                        _this.orders = data;
                        _this.reasonForApplication = "";
                        _this.Success("收货成功")
                    } else {
                        _this.Failed("收货失败，请核查订单！")
                    }

                },
                error: function (msg) {
                    _this.Failed("系统故障")
                }
            });

        },
        applicationReturns(order) {
            var reason = this.reasonForApplication
            if (reason == "") {
                this.Failed("请您填写理由后，重新申请！")
                this.dialogVisible = true;
            } else {
                var _this = this;
                var token = JSON.parse($.cookie('front-token'));
                order.ReasonForApplication = this.reasonForApplication;
                $.ajax({
                    type: "Patch",
                    url: "/api/Order/OrderOperation",
                    headers: {
                        Authorization: "Bearer " + token.access_token
                    },
                    data: {
                        Order: order,
                        OperationType: "applicationReturns"
                    },
                    dataType: "json",
                    success: function (data) {
                        if (data != null) {
                            _this.orders = data;
                            _this.reasonForApplication = "";
                            _this.Success("申请成功")
                        } else {
                            _this.Failed("申请失败，请核查订单！")
                        }

                    },
                    error: function (msg) {
                        _this.Failed("系统故障")
                    }
                });
            }
        },
        cancelReturns(order) {
            var _this = this;
            var token = JSON.parse($.cookie('front-token'));
            $.ajax({
                type: "Patch",
                url: "/api/Order/OrderOperation",
                headers: {
                    Authorization: "Bearer " + token.access_token
                },
                data: {
                    Order: order,
                    OperationType: "cancelReturns"
                },
                dataType: "json",
                success: function (data) {
                    if (data != null) {
                        _this.orders = data;
                        _this.Success("取消成功")
                    } else {
                        _this.Failed("取消失败，请核查订单！")
                    }

                },
                error: function (msg) {
                    _this.Failed("系统故障")
                }
            });
        },
        deleteOrder(order) {
            var _this = this;
            var token = JSON.parse($.cookie('front-token'));
            $.ajax({
                type: "Patch",
                url: "/api/Order/OrderOperation",
                headers: {
                    Authorization: "Bearer " + token.access_token
                },
                data: {
                    Order: order,
                    OperationType: "deleteOrder"
                },
                dataType: "json",
                success: function (data) {
                    if (data != null) {
                        _this.orders = data;
                        _this.Success("删除成功")
                    } else {
                        _this.Failed("删除失败，请核查订单！")
                    }

                },
                error: function (msg) {
                    _this.Failed("系统故障")
                }
            });
        },
        getOrdersByState(type) {
             var _this = this;
            var token = JSON.parse($.cookie('front-token'));
            $.ajax({
                type: "Get",
                url: "/api/Order/GetUserOrders",
                headers: {
                    Authorization: "Bearer " + token.access_token
                },
                contentType: "application/json",
                data: {
                    state: type
                },
                dataType: "json",
                success: function (data) {
                    _this.orders = data;
                },
                error: function (msg) {
                    alert(msg);
                }
            });
        }
    }
}
</script>